import VideoSurveillance from "./VideoSurveillance";
import { ref } from "vue";
import titleBg from "./assets/21193.svg";
import ModelAgri from "./assets/蒙版组109.webp";
import MeteInfo from "./MeteInfo";
import SoilInfo from "./SoilInfo";
import "./index.scss";
import TemHumDetection from "./TemHumDetection";
import LightIntensityAnalysis from "./LightIntensityAnalysis";
import CarbonAnalysis from "./CarbonAnalysis";
import DeviceNum from "./DeviceNum";
import DeviceMonitor from "@/views/dashboard/agriculture/DeviceMonitor";
import VScaleScreen from "v-scale-screen";

export default defineComponent({
	name: "Index",
	setup() {
		const time = ref("");
		const date = ref<Date>(new Date());
		const headerRef = ref<HTMLElement>();
		const bodyRef = ref<HTMLElement>();
		onMounted(() => {
			const headerHeight = headerRef.value?.style.height;
			bodyRef.value.style.height = "calc(100vh - " + headerHeight + "px" + ")";
			setInterval(() => {
				date.value = new Date();
				time.value = date.value.getHours() + ":" + date.value.getMinutes() + ":" + date.value.getSeconds();
			}, 1000);
		});
		return () => (
			<VScaleScreen height="1080" width="1920">
				<div className="back-ground-img w-full h-full px-5 pb-5 box-border flex flex-col">
					<header className="flex flex-row justify-between h-fit relative" ref={headerRef}>
						<div className={"logo h-fit m-auto flex flex-row absolute left-8 top-0 bottom-0"}>
							<div
								className={"rounded-[100%] "}
								style={{
									width: "24px",
									height: "24px",
									background: "linear-gradient(336.00deg, #ff9624 47.07%, #ffd110 100%)"
								}}
							></div>
							<div className={"text-white ml-2"}>晴</div>
						</div>
						<div className={"title h-fit w-full left-0 top-0 right-0 bottom-0 "}>
							<img className={"w-full h-full"} src={titleBg} alt={""} />
						</div>
						<div
							className={
								"time h-fit flex flex-row text-white m-auto justify-between items-center absolute right-6 top-0 bottom-0"
							}
						>
							<div className={"text-[20px] "}>{time.value}</div>
							<div className={"text-[14px] mx-3"}>
								{new Date().getFullYear() + "." + (new Date().getMonth() + 1) + "." + new Date().getDate()}
							</div>
						</div>
					</header>
					<div className="h-full w-full flex pb-3 " ref={bodyRef}>
						<div className={"left w-1/4 h-full flex flex-col"}>
							<MeteInfo className={"h-1/3"} />
							<SoilInfo className={"h-1/3"} />
							<TemHumDetection className={"h-1/3"} />
						</div>
						<div className={"center w-1/2 flex flex-col h-full box-border "}>
							<div className={"w-full h-[12%] flex flex-row justify-center item.scss-center"}>
								<DeviceNum></DeviceNum>
							</div>
							<div className={"w-full h-full"}>
								<img src={ModelAgri} className={"w-full h-full object-contain"} alt={""} />
							</div>
							<div className={" w-full h-[35%] flex flex-row"}>
								<LightIntensityAnalysis className={"w-1/2 h-full"}></LightIntensityAnalysis>
								<CarbonAnalysis className={"w-1/2 h-full"}></CarbonAnalysis>
							</div>
						</div>
						<div className={"right w-1/4 h-full flex flex-col"}>
							<VideoSurveillance className={"w-full h-full"}></VideoSurveillance>
							<DeviceMonitor className={"w-full h-full"}></DeviceMonitor>
						</div>
					</div>
				</div>
			</VScaleScreen>
		);
	}
});
